<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/static/lib/layui-v2.6.3/css/layui.css}" media="all">
    <script type="text/javascript" th:src="@{/static/lib/layui-v2.6.3/layui.js}"></script>
    <script type="text/javascript" th:src="@{/static/lib/jquery-3.4.1/jquery-3.4.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/jquery-1.9.1.min.js}"></script>
</head>
<body>
<form id="ffff" action="query" method="post">
    <div class="layui-form-item"
         style="display: inline-block; margin-top: 10px; position: relative; left: -20px; width: 300px;">
        <label class="layui-form-label">用户名查询:</label>
        <div class="layui-input-block">
            <input type="text" name="username" placeholder="用户名查询" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item"
         style="display: inline-block; margin-top: 10px; position: relative; left: -20px; width: 300px;">
        <label class="layui-form-label">权限查询:</label>
        <div class="layui-input-block">
            <input type="text" name="grade" placeholder="权限查询" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item"
         style="display: inline-block; margin-top: 10px; position: relative; left: -20px; width: 300px;">
        <label class="layui-form-label">状态查询:</label>
        <div class="layui-input-block">
            <input type="text" name="state" placeholder="状态查询" class="layui-input">
        </div>
    </div>
    <button id="btn1" type="submit" class="layui-btn" style="display: inline-block; left: 10px;">查询</button>
</form>
<button id="add1" type="button" class="layui-btn" style="display: inline-block; left: 10px;">新增</button>

<table class="layui-table">
    <thead>
    <tr>
        <th style="font-weight:bolder;">id</th>
        <th style="font-weight:bolder;">用户名</th>
        <th style="font-weight:bolder;">权限</th>
        <th style="font-weight:bolder;">状态</th>
        <th style="font-weight:bolder;">操作</th>
    </tr>
    </thead>
    <tbody>
    <span th:each="str:${list}">
					<tr>
						<td th:text="${str.id}"></td>
						<td th:text="${str.username}"></td>
						<td th:text="${str.grade}"></td>
						<td th:text="${str.state}"></td>
						<td>
							<button th:onclick="update([[${str.id}]])" class="layui-btn layui-btn-xs">编辑</button>
							<button th:onclick="return del([[${str.id}]])"
                                    class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger">删除</button>
						</td>
					</tr>
				</span>
    </tbody>
</table>
</body>
<script>
		function del(id) {
			if (confirm("确定要删除该信息吗？删除将不能恢复！")) {
				$.ajax({
					url: "del",
					type: "post",
					data: "id=" + id,
					//请求发送完之后的回调函数
					success: function(info) {
						console.info(info);
						if (info == 1) {
							alert("删除成功！");
						} else {
							alert("删除失败！");
						}
						$("#btn1").click();
					}
				});
				return true;
			} else
				return false;
		}

		layui.use(['layer', 'jquery', 'form'], function() {
			var layer = layui.layer;
			var $ = layui.jquery;
			var form = layui.form;
			$("#add1").click(function() {
				layer.open({
					title: "新增管理员",
					area: ['400px', '250px'],
					type: 1,
					content: $("#add2").html()
				})
				form.render(); //表单渲染，得渲染才会有效果显示出来
			})


			$(document).on('click', '#add11', function() {
				var params = $("#form1").serialize();
				$.ajax({
					url: "add",
					type: "post",
					data: params,
					//请求发送完之后的回调函数
					success: function(info) {
						if (info == 1) {
							alert("添加成功！");
						} else {
							alert("添加失败！");
						}
						$("#btn1").click();
					}
				});
			});


		})

		function update(id) {
			//弹出窗口
			layer.open({
				title: "修改信息",
				area: ['700px', '250px'],
				type: 2,
				content: "toUpdate?id=" + id,
			})

		}
	</script>
<script id="add2" type="text/html">
    <form id="form1" action="" method="" class="layui-form">
        <div class="layui-form-item" style="width: 300px;display:inline-block;">
            <label class="layui-form-label">用户名:</label>
            <div class="layui-input-block">
                <input type="text" name="username" placeholder="请输入用户名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="width: 300px;">
            <label class="layui-form-label">权限:</label>
            <div class="layui-input-block">
                <select name="grade" lay-verify="required">
                    <option value="">权限</option>
                    <option value="超级管理员">超级管理员</option>
                    <option value="管理员">管理员</option>
                </select>
            </div>
        </div>
    </form>
    <div style="text-align:center">
        <button id="add11" class="layui-btn">确定新增</button>
    </div>
</script>

</html>
